<template>
  <div class="wrapper">
    <div class="content">
      <NavHeader />
      <div class="left-right-wrapper">
        <div class="left">
          <ActionText/>
        </div>
        <div class="center">
          <img src="../assets/img/HendPhone.png" height="268" width="212"/>
        </div>
        <div class="right">
          <CallBackForm @showModal="showModal()" class="call-back-form"/>
        </div>
      </div>
    </div>
  </div>
  <Modal :show-modal="showModalState" @click="showModalState = !showModalState"/>
</template>
<script setup>
import NavHeader from "../components/Main/NavHeader.vue";
import ActionText from "../components/Main/ActionText.vue";
import CallBackForm from "../components/Main/CallBackForm.vue";
import Modal from "../components/Modal.vue";
import {onMounted, ref} from "vue";

let showModalState = ref(false);
const showModal = () => {
  showModalState.value = true;
  console.log(showModalState.value)
}

onMounted(() => {
  console.log(showModalState.value)
})

</script>
<style scoped lang="scss">
.wrapper {
  box-sizing: border-box;
  //width: 100vw;
  //height: 100vh;
  width: 100%;
  height: 100vh;
  background: url("../assets/img/BackGround.png");
  background-position: center;
  background-size: fill;
  background-repeat: no-repeat;

  @media (max-width: 619px) {
    height: fit-content;
    //background: url("../assets/img/bgMibile.png");
    background-position-y: bottom;
    background-repeat: no-repeat;
  }

  .content {
    padding-top: 40px;
    //padding-left: 2%;
    .left-right-wrapper {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      justify-content: space-between;
      padding-left: 20px;
      //padding-right: 20px;
      @media (max-width: 1260px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 700px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      .left {
        display: flex;
        align-items: end;

        @media (max-width: 1920px) {
          padding-left: 60px;
          margin-top: 20%;
        }
        @media (max-width: 1640px) {
          padding-left: 20px;
          margin-top: -3%;
        }
        @media (max-width: 1440px) {
          padding-left: 0px;
          margin-top: -3%;
        }
        @media (max-width: 1259px) {
          padding-left: 5%;
          margin-top: -3%;
        }
        @media (max-width: 700px) {
          margin-top: 10px;
          padding-left: 0px;
          justify-content: center;
          height: 400px;
        }
      }
      .center {
        position: absolute;
        left: calc(100% - 55%);
        bottom: 0%;
        @media (max-width: 1920px) {
          scale: 1.2;
          bottom: 3%;
        }
        @media (max-width: 1260px) {
          display: none;
        }
        @media (max-width: 1260px) {
          display: none;
        }
      }
      .right {
        display: flex;
        justify-content: center;
        align-items: end;
        margin-top: 13%;

        @media (max-width: 1920px) {
          margin-top: -3%;
          padding-right: 160px;
          justify-content: end;
        }
        @media (max-width: 1640px) {
          margin-top: -4%;
          padding-right: 50px;
          justify-content: end;
        }
        @media (max-width: 1260px) {
          margin-top: 10%;
          padding-right: 50px;
          justify-content: end;
          margin-top: -4%;
        }
        @media (max-width: 1000px) {
          padding-right: 0px;
        }
        @media (max-width: 700px) {

          padding-right: 0px;
          justify-content: center;
          margin-top: 0px;
        }
        @media (max-width: 619px) {
          position: relative;
          bottom: 100px;
        }
      }
      .call-back-form {

      }
    }
  }
}
</style>